<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>Web-awesome by fengmiaosen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
  </head>
  <body>
    <section class="page-header">
      <h1 class="project-name">Web-awesome</h1>
      <h2 class="project-tagline">好玩的前端小玩意</h2>
      <a href="https://github.com/fengmiaosen/web-awesome" class="btn">View on GitHub</a>
      <a href="https://github.com/fengmiaosen/web-awesome/zipball/master" class="btn">Download .zip</a>
      <a href="https://github.com/fengmiaosen/web-awesome/tarball/master" class="btn">Download .tar.gz</a>
    </section>

    <section class="main-content">
      <h1>
<a id="web-awesome" class="anchor" href="#web-awesome" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>web-awesome</h1>

<blockquote>
<p>好玩的前端小玩意</p>

<p>通过个人主页的二级域名访问 <a href="http://fengmiaosen.github.io/web-awesome/">http://fengmiaosen.github.io/web-awesome/</a></p>
</blockquote>

<h1>
<a id="github-rank" class="anchor" href="#github-rank" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Github rank</h1>

<ul>
<li><a href="https://github-ranking.com/">查看</a></li>
</ul>

<h1>
<a id="前端技术汇总" class="anchor" href="#%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E6%B1%87%E6%80%BB" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端技术汇总</h1>

<ul>
<li><p><a href="https://www.awesomes.cn/rank?sort=trend">awesome</a></p></li>
<li><p><a href="https://github.com/nicejade/Front-end-tutorial">前端学习资料大全</a></p></li>
</ul>

<h1>
<a id="页面效果" class="anchor" href="#%E9%A1%B5%E9%9D%A2%E6%95%88%E6%9E%9C" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>页面效果</h1>

<ul>
<li>
<p>页面加载库 <a href="http://github.hubspot.com/pace/docs/welcome/">PACE</a></p>

<ul>
<li>多种页面加载效果可供选择</li>
</ul>
</li>
<li><p>基于Canvas的加载动画 <a href="http://tympanus.net/codrops/2016/03/08/spring-loaders-rebound-canvas/">spring-loaders</a></p></li>
<li><p>CSS3D反转特效 <a href="http://adobe.v404.cn/adobe/">adobe</a></p></li>
<li><p>交互式多层饼图 <a href="https://github.com/alexkuz/cake-chart">cake-chart</a></p></li>
<li><p>可视化图 <a href="https://github.com/airbnb/caravel">caravel</a></p></li>
<li><p>CSS3 关键帧动画库<a href="https://travelitem.taobao.com/item.htm?id=35722626709&amp;spm=a1z09.2.0.0.fepqS3&amp;_u=t8fi6pea266">bounce</a></p></li>
<li><p>小型JavaScript动画库 <a href="http://daniel-lundin.github.io/snabbt.js">snabbt</a></p></li>
<li><p>javascript动画库 <a href="https://github.com/juliangarnier/anime">anim</a></p></li>
<li><p>侧栏划出效果 <a href="https://github.com/jakiestfu/Snap.js/">Snap</a></p></li>
</ul>

<h1>
<a id="前端ui框架" class="anchor" href="#%E5%89%8D%E7%AB%AFui%E6%A1%86%E6%9E%B6" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端UI框架</h1>

<ul>
<li><p>基于Vue和WeUI的组件库 <a href="https://vuxjs.gitbooks.io/vux/content/">vux</a></p></li>
<li><p>微信官方UI库 <a href="https://github.com/weui/weui">WeUI</a></p></li>
<li><p>纯CSS UI界面集合 <a href="https://github.com/airen/DemoHouse">Collection best of Web Demos</a></p></li>
</ul>

<h1>
<a id="css框架" class="anchor" href="#css%E6%A1%86%E6%9E%B6" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>CSS框架</h1>

<ul>
<li><p>前端向 10+ 值得前端开发者关注的优秀 CSS 框架 <a href="http://gold.xitu.io/entry/577a7c8c165abd0054c2e2f6">css框架</a></p></li>
<li><p>小型SCSS基础库 <a href="http://sierra-library.github.io/">sierra-library</a></p></li>
<li><p>基于Flex布局的CSS框架库 <a href="http://bulma.io/">bulma</a></p></li>
<li><p>Pure.css <a href="http://purecss.io/">pure.css</a></p></li>
</ul>

<h1>
<a id="页面浮层" class="anchor" href="#%E9%A1%B5%E9%9D%A2%E6%B5%AE%E5%B1%82" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>页面浮层</h1>

<ul>
<li>浮层效果 <a href="https://github.com/humaan/Modaal">Modaal</a>
</li>
</ul>

<h1>
<a id="前端工具" class="anchor" href="#%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端工具</h1>

<ul>
<li>
<p>在线PPT制作 <a href="http://formidable.com/open-source/spectacle/">spectacle</a></p>

<ul>
<li>基于React基础库使用JSX语法来编写在线演示PPT，并能导出为PDF文档</li>
</ul>
</li>
<li><p>在线内容编辑 <a href="https://github.com/substance/substance">substance</a></p></li>
<li><p>富语义文本编辑 <a href="https://github.com/prosemirror/prosemirror">prosemirror</a></p></li>
<li><p>HTML预编译库 <a href="https://github.com/davidmerfield/typeset">typeset</a></p></li>
<li><p>日期时间处理 <a href="http://momentjs.com/">momentjs</a></p></li>
<li><p>在线解析处理PDF文件 <a href="https://github.com/mozilla/pdf.js">pdf.js</a></p></li>
<li><p>算法可视化学习 <a href="https://github.com/parkjs814/AlgorithmVisualizer">AlgorithmVisualizer</a></p></li>
<li><p>前端SASS组件文档生成管理 <a href="https://github.com/nickberens360/atomic-docs">atomic</a></p></li>
</ul>

<h1>
<a id="版本管理" class="anchor" href="#%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>版本管理</h1>

<ul>
<li>git的纯js实现 <a href="https://github.com/SamyPesse/gitkit-js?utm_source=nodeweekly&amp;utm_medium=email">gitkit.js</a>
</li>
</ul>

<h1>
<a id="前端绘图" class="anchor" href="#%E5%89%8D%E7%AB%AF%E7%BB%98%E5%9B%BE" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端绘图</h1>

<ul>
<li><p>像素图形绘制 <a href="https://github.com/googlecreativelab/anypixel">anypixel</a></p></li>
<li><p>SVG 进度条 <a href="https://kimmobrunfeldt.github.io/progressbar.js/">progressbar</a></p></li>
<li><p>刮刮卡刮奖效果 <a href="https://github.com/websanova/wScratchPad">wScratchPad</a></p></li>
</ul>

<h1>
<a id="前端开发调试" class="anchor" href="#%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E8%B0%83%E8%AF%95" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端开发调试</h1>

<ul>
<li><p>Web开发调试工具 <a href="https://github.com/AlloyTeam/AlloyLever">AlloyLever</a></p></li>
<li><p>JavaScript运行性能监测 <a href="https://github.com/mrdoob/stats.js">stats.js</a></p></li>
<li><p>webapp debug工具 <a href="https://github.com/liriliri/eruda">eruda</a></p></li>
<li>
<p>移动设备外框 <a href="https://github.com/marvelapp/devices.css">devices.css</a></p>

<h1>
<a id="娱乐工具" class="anchor" href="#%E5%A8%B1%E4%B9%90%E5%B7%A5%E5%85%B7" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>娱乐工具</h1>
</li>
<li>键盘播放Are you ok歌曲 <a href="https://github.com/llh911001/are-you-ok">are-you-ok</a>
</li>
</ul>

<h1>
<a id="页面布局" class="anchor" href="#%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>页面布局</h1>

<p># <a href="https://golden-layout.com/">golden-layout</a></p>

<h1>
<a id="虚拟现实vr" class="anchor" href="#%E8%99%9A%E6%8B%9F%E7%8E%B0%E5%AE%9Evr" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>虚拟现实（VR）</h1>

<p># <a href="https://aframe.io/">A-Frame</a></p>

<h1>
<a id="开源地图" class="anchor" href="#%E5%BC%80%E6%BA%90%E5%9C%B0%E5%9B%BE" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>开源地图</h1>

<p># <a href="http://leafletjs.com/index.html">leafletjs</a></p>

<h1>
<a id="网页字体" class="anchor" href="#%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>网页字体</h1>

<p># <a href="http://font-spider.org/">字蛛</a></p>

<h1>
<a id="桌面app开发" class="anchor" href="#%E6%A1%8C%E9%9D%A2app%E5%BC%80%E5%8F%91" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>桌面APP开发</h1>

<p># 基于JavaScript的桌面app开发 <a href="http://electron.atom.io/">electron</a></p>

<h1>
<a id="手机传感器" class="anchor" href="#%E6%89%8B%E6%9C%BA%E4%BC%A0%E6%84%9F%E5%99%A8" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>手机传感器</h1>

<p># Apple Force Touch支持 <a href="https://github.com/yamartino/pressure">pressure</a></p>

      <footer class="site-footer">
        <span class="site-footer-owner"><a href="https://github.com/fengmiaosen/web-awesome">Web-awesome</a> is maintained by <a href="https://github.com/fengmiaosen">fengmiaosen</a>.</span>

        <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
      </footer>

    </section>

  
  </body>
</html>
